<template>
	<view class="container">
		<view class="top">
			<view class="time">

				{{time}}

			</view>

			<view class="box">
				<view class="box-item">
					<image src="../../static/icon/success_icon.png" mode="widthFix"></image>
					<view class="">
						成功
					</view>
					<view class="money">
						<text class="unit">￥</text>{{orderRequest.successAmount}}
					</view>


				</view>
				<view class="box-item">
					<image src="../../static/icon/fail_icon.png" mode="widthFix"></image>
					<view class="">
						失败
					</view>
					<view class="money fail">
						<text class="unit">￥</text>{{orderRequest.failAmount}}
					</view>

				</view>

			</view>
		</view>
		<!-- 列表 -->
		<view class="listBox">
			<view class="tab-header">
				<!-- 选项卡头部 -->
				<view class="tab-item" :class="{ active: activeTab === 'tab1' }" @click="changeTab('tab1')">
					成功
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'tab2' }" @click="changeTab('tab2')">
					失败
				</view>
			</view>
			<scroll-view class="list-wrapper" scroll-y="true" :refresher-enabled="true"
				:refresher-triggered="isRefreshing" @refresherrefresh="refresh" @scrolltolower="loadMore"
				v-if="listData.length > 0">
				<view class="card-wrapper" v-for="(item, index) in listData" :key="index" @click="onItemClick(item)">
					<view class="icon">
						<image :src="getTypeName(item.payTypeCode,'1')" mode="widthFix"></image>
					</view>
					<view class="name">
						<view class="title">
							{{getTypeName(item.payTypeCode,'2')}}
						</view>
						<view class="date">
							{{item.createTime}}
						</view>
					</view>
					<view class="">
						<view class="money">
							{{item.transAmount}}
						</view>
						<view class="settle" :class="item.transStatus=='SUCCESS'?'success':''">
							{{item.transStatus=='SUCCESS'?"已入账":"未入账"}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="empty" v-else>
				<view class="">
					<image src="/static/icon/settle_no.png" mode="widthFix"></image>
				</view>
				<view class="">
					暂无数据
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from "vue";
	import {
		showToast
	} from "@/utils/toast";
	import {
		orderQuery
	} from "@/api/common.js";
	import {
		useStore
	} from "@/store";
	import {
		concat
	} from 'lodash';
	import {


		getAfterDate
	} from "@/utils/date";
	/** store实例 */
	const store = useStore();

	const activeTab = ref("tab1")
	onShow(() => {

	});
	// 创建响应式数据  
	const alertDialog = ref();
	let time = ref(null);
	let queryParams = ref({

		page: 1,
		size: 20,
		userId: store.userInfo.userId,
		oemUserNo: 'BU100002',
		startTime: "",
		endTime: "",
		transStatus: "SUCCESS"
	});
	onLoad((option) => {
		time.value = option.time;
		// getAfterDate(parsedDate, 1, "day");
		const parsedDate = new Date(option.time);
		queryParams.value.startTime = time.value;
		queryParams.value.endTime = time.value;

		getOrderList();
	});
	const listData = ref([])
	const isRefreshing = ref(false)
	let total = ref(0)
	let isNoMoreData = ref(false)
	const orderRequest = ref({})

	function getTypeName(code, type) {

		if (code == 'POS') {
			if (type == "1") {
				return "/static/icon/type_card.png"
			} else {
				return "刷卡支付"
			}
		} else if (code == 'MOBILE_PAY') {
			if (type == "1") {
				return "/static/icon/type_ysf.png"
			} else {
				return "云闪付"
			}
		} else if (code == 'WX') {
			if (type == "1") {
				return "/static/icon/type_wx.png"
			} else {
				return "微信支付"
			}
		} else if (code == 'ZFB') {
			if (type == "1") {
				return "/static/icon/type_alipay.png"
			} else {
				return "支付宝支付"
			}
		} else {
			if (type == "1") {
				return "/static/icon/type_yl.png"
			} else {
				return "刷卡支付"
			}
		}
	}

	function changeTab(tab) {
		activeTab.value = tab;
		queryParams.value.transStatus = tab == "tab1" ? "SUCCESS" : "FAIL";
		refresh();
	}

	function filterEvent() {
		alertDialog.value.open()
	}
	// 选项被选中时
	function itemChecked(item) {

		// 多选
		item.checked = !item.checked;

	}

	function getOrderList() {
		orderQuery(queryParams.value).then((res) => {
			total.value = res.orderCountInfo.totalOrderCount;
			orderRequest.value = res.orderRequest;
			listData.value = concat(listData.value, res.orderPageList);
		});
	}

	function refresh() {
		// 重置相关数据
		isRefreshing.value = true;
		total.value = 0
		listData.value = []
		isNoMoreData.value = false
		queryParams.value.page = 1

		// 请求报表数据
		getOrderList()
	}

	// 加载下一页数据
	function loadMore() {
		if (isNoMoreData.value) {
			showToast('没有更多数据')
		} else {
			queryParams.value.page++
			getOrderList()
		}
	}

	function onItemClick(item) {
		uni.navigateTo({
			url: "/pagesDetail/transactionDetail/index?item=" + encodeURIComponent(JSON.stringify(item)),
		});
	}
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>
<style lang="scss"></style>